import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Bell, Check, ShoppingBag, Truck, Star, Trash } from "lucide-react";

// 通知类型
type NotificationType = 'order' | 'shipping' | 'system' | 'review';

// 模拟通知数据
interface Notification {
  id: number;
  type: NotificationType;
  title: string;
  content: string;
  date: string;
  read: boolean;
}

// 通知类型图标映射
const notificationIcons: Record<NotificationType, React.ReactNode> = {
  order: <ShoppingBag className="h-5 w-5" />,
  shipping: <Truck className="h-5 w-5" />,
  system: <Bell className="h-5 w-5" />,
  review: <Star className="h-5 w-5" />,
};

export default function Notifications() {
  // 模拟通知数据
  const [notifications, setNotifications] = useState<Notification[]>([
  
  ]);
  
  // 标记通知为已读
  const markAsRead = (id: number) => {
    setNotifications(prevNotifications =>
      prevNotifications.map(notification =>
        notification.id === id ? { ...notification, read: true } : notification
      )
    );
  };
  
  // 标记所有通知为已读
  const markAllAsRead = () => {
    setNotifications(prevNotifications =>
      prevNotifications.map(notification => ({ ...notification, read: true }))
    );
  };
  
  // 删除通知
  const deleteNotification = (id: number) => {
    setNotifications(prevNotifications =>
      prevNotifications.filter(notification => notification.id !== id)
    );
  };
  
  // 未读通知数量
  const unreadCount = notifications.filter(notification => !notification.read).length;
  
  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold">站内通知</h1>
        
        <div className="flex gap-2">
          {unreadCount > 0 && (
            <Button variant="outline" onClick={markAllAsRead}>
              全部标记为已读
            </Button>
          )}
        </div>
      </div>
      
      {notifications.length === 0 ? (
        <div className="text-center py-12">
          <Bell className="mx-auto h-12 w-12 text-muted-foreground" />
          <p className="mt-4 text-lg text-muted-foreground">暂无通知</p>
        </div>
      ) : (
        <div className="space-y-4">
          {notifications.map(notification => (
            <Card 
              key={notification.id} 
              className={`transition-colors ${notification.read ? 'bg-card' : 'bg-accent/20'}`}
            >
              <CardContent className="p-4">
                <div className="flex items-start gap-4">
                  <div className={`mt-1 p-2 rounded-full bg-primary/10 text-primary`}>
                    {notificationIcons[notification.type]}
                  </div>
                  
                  <div className="flex-1">
                    <div className="flex justify-between items-start">
                      <div>
                        <h3 className="font-medium">{notification.title}</h3>
                        <p className="text-sm text-muted-foreground mt-1">
                          {notification.content}
                        </p>
                      </div>
                      
                      <div className="flex flex-col items-end gap-2">
                        <span className="text-xs text-muted-foreground">
                          {notification.date}
                        </span>
                        
                        <div className="flex gap-1">
                          {!notification.read && (
                            <Button 
                              variant="ghost" 
                              size="icon" 
                              className="h-8 w-8" 
                              onClick={() => markAsRead(notification.id)}
                            >
                              <Check className="h-4 w-4" />
                            </Button>
                          )}
                          <Button 
                            variant="ghost" 
                            size="icon" 
                            className="h-8 w-8 text-destructive" 
                            onClick={() => deleteNotification(notification.id)}
                          >
                            <Trash className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
} 